<template>
  <div class="loading" v-show="this.isShow.isLDShow">
    <div class="container">
      <div class="sub-container">
        <div class="ball-container" ref="myBall">
          <div class="ball rotateBall"></div>
        </div>
        <div class="playground"></div>
      </div>
      <div class="loadingNum">{{ loadingNum }}%</div>
      <div class="preImgBox">
        <span v-for="(data,index) in preLoadImg" :key="generateId(index)">
          <img v-bind:id="generateId(index)" src="" style="visibility: hidden; width: 1px; height: 1px; position: absolute;">
        </span>
      </div>
    </div>
    <div class="logo"></div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: 'loading',
  props: {
    isShow: {
      type: Object
    }
  },
  data () {
    return {
      loadingNum: 0,
      length: 11.225,
      preLoadImg: [
        { src: require('../page-kv/kv_bg.jpg') },
        { src: require('../page-kv/kv_lawn.jpg') },
        { src: require('../page-kv/kv_header.png') },
        { src: require('../page-kv/kv_logo.png') },
        { src: require('../page-kv/kv_start.png') },
        { src: require('../page-kv/kv_title-ball.png') },
        { src: require('../page-kv/kv_title-battle.png') },
        { src: require('../page-kv/kv_title-best.png') },
        { src: require('../page-kv/kv_title-bottom.png') },
        { src: require('../page-final/final_bg.jpg') },
        { src: require('../page-final/final_board.png') },
        { src: require('../page-final/final_btn.png') },
        { src: require('../page-final/final_logo.png') },
        { src: require('../page-final/final_para1.png') },
        { src: require('../page-final/final_para2.png') },
        { src: require('../page-final/final_para3.png') },
        { src: require('../page-final/final_para4.png') },
        { src: require('../page-final/final_para5.png') },
        { src: require('../page-final/final_para6.png') },
        { src: require('../page-final/final_para7.png') },
        { src: require('../page-final/final_para8.png') },
        { src: require('../page-final/final_qr-temp.png') },
        { src: require('../page-final/final_ribbon.png') },
        { src: require('../page-final/final_qr-temp.png') },
        { src: require('../page-final/final_save.jpg') },
        { src: require('../page-final/final_save.png') },
        { src: require('../page-final/final_title.png') },
        { src: require('../page-final/final_title1.png') },
        { src: require('../page-final/final_title2.png') },
        { src: require('../page-final/final_title3.png') },
        { src: require('../page-final/final_fireworks1.png') },
        { src: require('../page-final/final_fireworks2.png') },
        { src: require('../page-final/final_fireworks3.png') },
        { src: require('../page-play/images/bg.jpg') },
        { src: require('../page-play/images/bgguang2.png') },
        { src: require('../page-play/images/bgguang1.png') },
        { src: require('../page-play/images/fenbg.png') },
        { src: require('../page-play/images/football.png') },
        { src: require('../page-play/images/ftbg.png') },
        { src: require('../page-play/images/jiantou.png') },
        { src: require('../page-play/images/jiantouqiu.png') },
        { src: require('../page-play/images/msg-tip1-btn.png') },
        { src: require('../page-play/images/msg-tip1.png') },
        { src: require('../page-play/images/person-qiu-ren1.png') },
        { src: require('../page-play/images/person-qiu-ren2.png') },
        { src: require('../page-play/images/person-qiu-ren3.png') },
        { src: require('../page-play/images/person-qiu-ren4.png') },
        { src: require('../page-play/images/person-qiu-ren5.png') },
        { src: require('../page-play/images/person-ren1.png') },
        { src: require('../page-play/images/person-ren2.png') },
        { src: require('../page-play/images/person-ren3.png') },
        { src: require('../page-play/images/person-ren4.png') },
        { src: require('../page-play/images/person-ren5.png') },
        { src: require('../page-play/images/person-smy.png') },
        { src: require('../page-play/images/qiumen.png') },
        { src: require('../page-play/images/timebg.png') },
        { src: require('../page-play/images/tip-1.png') },
        { src: require('../page-play/images/tip-2.png') },
        { src: require('../page-play/images/tip-3.png') },
        { src: require('../page-play/images/tip-bad.png') },
        { src: require('../page-play/images/tip-bad2.png') },
        { src: require('../page-play/images/tip-go.png') },
        { src: require('../page-play/images/tip-good.png') },
        { src: require('../page-play/images/tip-result2.png') },
        { src: require('../page-play/images/tip-result3-btn.png') },
        { src: require('../page-play/images/tip-reusult1.png') },
      ]
    }
  },
  computed: {
  },
  methods: {
    generateId (index) {
      return 'mImg' + index
    },
    loadNextImg(imgID, max){
		const myBall = this.$refs.myBall
		let allImg = $('.preImgBox img')
		let _this = this
		let imgSrc = this.preLoadImg[imgID]['src']
		allImg.eq(imgID).attr('src', imgSrc)
		allImg.eq(imgID).on('load', function() {
			_this.loadingNum = parseInt(imgID / max*100)
			let len = _this.length * _this.loadingNum * 0.01
			myBall.style.transform = `translate3d(${len}rem, 0, 0)`
			imgID++
			if(imgID >= max){
			  console.log('complete')
			  _this.loadingNum = 100
			  _this.next()
			}else{
			  _this.loadNextImg(imgID,max)
			}
		})
    },
    next () {
      this.$emit('toKV')
    },
    moveBall () {
      const ball = this.$refs.myBall

    }
  },
  mounted () {
    let that = this
    let allImg = $('.preImgBox img')
    let allImgNum = allImg.length
    let imgID = 0
    setTimeout(() => {
      that.loadNextImg(imgID,allImgNum)
    }, 2000)
  }
}
</script>

<style lang="less" scoped>
.loading {
  position: relative;
  width: 100%;
  height: 100%;
  .container {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 50%;
    transform: translate(-7.03125rem /* 112.5/16 */, -2.875rem /* 46/16 */);
    width: 14.0625rem /* 225/16 */;
    height: 5.75rem /* 92/16 */;
    .sub-container {
      position: relative;
      width: 100%;
      height: 2.8125rem /* 45/16 */;
      .playground {
        width: 100%;
        height: 100%;
        background-image: url('./loading_playground.png');
        background-size: 100% 100%;
      }
      .ball-container {
        // transform: translate3d(0, 0, 0);
        .ball {
          position: absolute;
          margin-top: .8rem;
          width: 1.40625rem /* 22.5/16 */;
          height: 1.40625rem /* 22.5/16 */;
          background-image: url('./loading_ball.png');
          background-size: 100% 100%;
        }
      }
    }
    .loadingNum {
      font-size: .625rem /* 10/16 */;
      color: rgb(108, 197, 128);
    }
  }
  .logo {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    transform: translateX(-4.890625rem /* 78.25/16 */);
    width: 9.78125rem /* 156.5/16 */;
    height: .96875rem /* 15.5/16 */;
    background-image: url('./loading_logo.png');
    background-size: 100% 100%;
  }
}

.rotateBall {
  animation: rotate 0.6s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
